<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=none, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <title>苏宁页面</title>
    <style>
      html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <section class="open_app">
        <a href="#"></a>
        <a href="#"></a>
        <img src="images/download.jpg" alt="">
    </section>
    <header class="header">
        <div class="title_content">
            <a class="classify">
                <img src="images/classify.png" alt="">
            </a>
            <a class="title_main">
                <img src="images/title.gif" alt="">
            </a>
            <a class="sign_in">
                <img src="images/sing_in.png" alt="">
            </a>
        </div>
        <div class="search">
            <a href="#">
                <div class="search_icon"></div>
                <span>疯抢199减100元神券</span>
            </a>
        </div>
    </header>
    <section class="banner">
        <img src="images/banner.png" alt="" class="banner_bg">
        <!-- 轮播图 -->
        <div class="banner_main">
            <img src="" alt="">
                <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/轮播图/main.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/1.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/2.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/3.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/4.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/5.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/6.jpg"> 1</div>
                    <div class="swiper-slide"><img src="./images/轮播图/7.jpg"> 1</div>
                    
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <nav class="nav fix">
        <ul>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/miaosha.png" alt="">
                    </div>
                    <p>苏宁秒杀</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/chaoshi.png" alt="">
                    </div>
                    <p>苏宁超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/pinggou.png" alt="">
                    </div>
                    <p>苏宁拼购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/shuma.png" alt="">
                    </div>
                    <p>手机数码</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/jiadian.png" alt="">
                    </div>
                    <p>苏宁家电</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/shuiguo.png" alt="">
                    </div>
                    <p>免费水果</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/huiyuan.png" alt="">
                    </div>
                    <p>super会员</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/qiandao.png" alt="">
                    </div>
                    <p>签到有礼</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/lingquan.png" alt="">
                    </div>
                    <p>领券中心</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav_icon">
                        <img src="images/gengduo.png" alt="">
                    </div>
                    <p>更多频道</p>
                </a>
            </li>
        </ul>
    </nav>
    <section class="new_user">
        <a href="#">
            <img src="images/xinren.png" alt="">
        </a>
        <div class="goods_line"></div>
        <a href="#">
            <img src="images/baoyou.gif" alt="">
        </a>
        <div class="goods_line"></div>
        <a href="#">
            <img src="images/baoyou2.gif" alt="">
        </a>
    </section>
    <section class="shop_main">
        <div class="main">
            <div class="goods">
                <h4>限时秒杀</h4>
                <p>人气好货限时抢</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="upload/picH_1.jpg" alt="">
                            <span>￥2.9</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="upload/picH_2.jpg" alt="">
                            <span>￥29.9</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="goods_line"></div>
            <div class="goods">
                <h4>大聚惠</h4>
                <p>聚优品·惠生活</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="upload/juyoupin.webp" alt="">
                            <p class="goods_box">飞科(FLYCO)</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="upload/juyoupin2.webp" alt="">
                            <p class="goods_box">清风</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="goods">
                <h4>新品首发</h4>
                <p>Find X3免费试</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="upload/xinpin.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="upload/xinpin2.webp" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="goods_line"></div>
            <div class="goods">
                <h4>苏宁拼购</h4>
                <p>2人拼更实惠 全场包邮</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="upload/pingou1.webp" alt="">
                            <p class="goods_box">2人拼79</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="upload/pingou2.webp" alt="">
                            <p class="goods_box">2人拼32</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="recommend">
            <div class="re_title">
                <h4>为您推荐</h4>
                <p>精选频道</p>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <img src="upload/guoji.webp" alt="">
                        <span>苏宁国际</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/outlets.webp" alt="">
                        <span>苏宁Outlets</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/qianggou.png" alt="">
                        <span>会员抢购</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/super.png" alt="">
                        <span>Super会员</span>
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <footer class="footer">
        <ul>
            <li>
                <a href="#">
                    <img src="images/xihuan.png" alt="">
                    <p>猜你喜欢</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/fenlei.png" alt="">
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/paihang.png" alt="">
                    <p>排行榜</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/gouwuche.png" alt="">
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/wode.png" alt="">
                    <p>我的易购</p>
                </a>
            </li>
        </ul>
    </footer>
    <!-- js部分 -->
  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
    
</body>
</html>